<template>
	<view class="container">

		<up-form labelPosition="left" labelWidth="150rpx">
			<view class="form">
				<up-form-item label="昵称" borderBottom>
					<up-input v-model="form.nickname" placeholder="请输入昵称" border="none"></up-input>
				</up-form-item>
				<up-form-item label="真实姓名" borderBottom>
					<up-input v-model="form.realName" placeholder="请输入真实姓名" border="none"></up-input>

					<template #right>
						<uni-data-select :disabled="(type==0 || type==3)&&form.gender" v-model="form.gender"
							:localdata="range" :clear="false"></uni-data-select>
					</template>
				</up-form-item>
				<up-form-item label="联系电话" borderBottom>
					<up-input v-model="form.mobile" placeholder="请输入联系电话" border="none"></up-input>
				</up-form-item>
				<up-form-item label="真实头像">
					<view class="avatar" @tap="changeImg('avatar')"><up-avatar v-if="form.avatar"
							:src="basUrl.baseURL+form.avatar" size="46rpx"></up-avatar> <up-icon name="arrow-right"
							style="margin-left: 20rpx;" size="32rpx"></up-icon></view>
				</up-form-item>
			</view>
			<view class="form_cert">
				<up-form-item label="身份证号" borderBottom>
					<up-input v-model="form.idCard" placeholder="请输入身份证号" border="none"></up-input>
				</up-form-item>
				<up-form-item borderBottom>
					<view class="idCards">
						<view class="ids_img" style="background: url(/static/persion/zheng.png) center no-repeat;"
							@click="changeImg('idFront')">
							<up-image v-if="form.idFront" :src="`${ basUrl.baseURL }${form.idFront}`" mode="widthFix">
							</up-image>

							<image class="icon" src="/static/persion/xj.png" width="30rpx" mode="widthFix"></image>
						</view>
						<view class="ids_img" style="background: url(/static/persion/fan.png) center no-repeat;"
							@click="changeImg('idBack')">
							<up-image v-if="form.idBack" :src="`${ basUrl.baseURL }${form.idBack}`" mode="widthFix">
							</up-image>

							<image class="icon" src="/static/persion/xj.png" width="30rpx" mode="widthFix"></image>
						</view>
					</view>
				</up-form-item>
				<up-form-item label="常住地址">
					<up-input v-model="form.idCard" placeholder="常住地址" border="none"></up-input>
					<template #right>
						<view @click="onChoose"><up-icon name="map"></up-icon></view>
					</template>
				</up-form-item>
			</view>
		</up-form>
		<view class="btnSty">
			<up-button type="success" :loading="loading"
				color="linear-gradient(to right, rgb(216, 0, 0), rgb(213, 90, 2))" text="提交" @click="save"></up-button>
		</view>
	</view>
	<view class="footer" style="height: 50rpx;line-height: 50rpx;"></view>

</template>
<script>
	import {
		getUserInfoApi,
		updateUserInfoApi
	} from '@/api/user'
	import basUrl from "@/config/config.js"
	import {
		Upload
	} from "@/utils/upload.js"
	import dayjs from "dayjs"
	import {
		onLoad,
		onUnload,
		onReady
	} from "@dcloudio/uni-app"


	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"

	export default {

		setup() {
			const state = reactive({
				show: false,
				loading: false,
				range: [{
						value: 0,
						text: '女'
					},
					{
						value: 1,
						text: '男'
					}
				],
				type: '',
				form: {
					address: "",
					avatar: "",
					gender: 0,
					idBack: "",
					idFront: "",
					latitude: 0,
					longitude: 0,
					mobile: "",
					nickname: "",
					realName: ""
				},
			})
			onLoad((option) => {
				getData()
			})

			const formatter = (type, value) => {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				return value;
			}

			// 获取人个信息
			const getData = async () => {
				const {
					data
				} = await getUserInfoApi()
				state.form = data

			}
			const goBack = () => {
				uni.navigateBack(-1)
			}
			const previewImage = (urls) => {
				uni.previewImage({
					urls: [urls]
				})
			}

			const onChoose = () => {
				uni.hideKeyboard()
				uni.chooseLocation({
					type: "gcj02",
					success: (res) => {
						console.log(res)
						state.form.latitude = res.latitude
						state.form.longitude = res.longitude
						state.form.address = res.address
					}

				});
			}

			//选择图片
			const changeImg = (key) => {

				// 从相册选择9张图
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {

						const result = await Upload(res.tempFilePaths[0]);
						state.form[key] = result
						console.log(result)
						console.log(state.form)

					}
				})
			}


			const save = async () => {
				if (!state.form.nickname) {
					uni.$u.toast("请输入昵称");
					return false;
				}
				if (!state.form.realName) {
					uni.$u.toast("请输入真实姓名");
					return false;
				}
				if (state.form.gender != 0 && !state.form.gender) {
					uni.$u.toast("请选择性别");
					return false;
				}
				state.form.mobile = state.form.mobile.replace(/\s/g, "");
				if (!uni.$u.test.mobile(state.form.mobile)) {
					uni.$u.toast("手机号格式有误");
					return false;
				}
				if (!state.form.avatar) {
					uni.$u.toast("请上传头像");
					return false;
				}
				state.loading = true
				let data = {
					address: state.form.address ?? '',
					avatar: state.form.avatar ?? '',
					gender: state.form.gender ?? '',
					idBack: state.form.idBack ?? '',
					idFront: state.form.idFront ?? '',
					latitude: state.form.latitude ?? '',
					longitude: state.form.longitude ?? '',
					mobile: state.form.mobile ?? '',
					realName: state.form.realName ?? '',
					nickname: state.form.nickname ?? '',
				}

				try {
					updateUserInfoApi(data).then(r => {
						console.log(r);
						if (r.code == 200) {
							uni.showToast({
								title: "保存成功",
								complete() {
									setTimeout(() => {
										uni.navigateBack();
									}, 2000);
								}
							})
						}
					});
					// uni.redirectTo({
					// 	url: '/pages/index/compont/persionSuccess'
					// })
				} catch {
					state.loading = false
				}

			}
			// 获取日期
			const getDate = (e) => {
				state.show = false

				const timeFormat = uni.$u.timeFormat;
				if (state.dateType === "workAt") {
					state.form.workAt = timeFormat(e.value, 'yyyy-mm-dd 00:00:00');
				} else {
					state.form.birthday = timeFormat(e.value, 'yyyy-mm-dd  00:00:00');
				}
				state.dateType = ""
				state.title = ""

			}
			// 选择日期
			const setDate = (type) => {
				// type
				state.dateType = type
				if (type === "workAt") {
					state.title = "从业时间"
				} else {
					state.title = "出生年月"
				}
				state.show = true
			}
			return {
				...toRefs(state),
				save,
				basUrl,
				onChoose,
				previewImage,
				formatter,
				dayjs,
				getDate,
				setDate,
				getData,
				changeImg,
				goBack,
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
		font-size: 32rpx;
	}
</style>
<style scoped lang="scss">
	.form {
		background: #fff;
		padding: 20rpx;

		.avatar {
			display: flex;
			justify-content: flex-end;
		}

		uni-data-select {
			:deep(.uni-select) {
				border: 2rpx solid #bf0000;
				background: #fff;
			}

			:deep(.uni-select__input-text) {
				color: #bf0000;
			}

			:deep(.uni-icons) {
				color: #bf0000 !important;
			}
		}
	}

	.form_cert {
		background: #fff;
		margin-top: 20rpx;
		padding: 20rpx;

		.idCards {
			display: flex;
			justify-content: space-between;

			.ids_img {
				overflow: hidden;
				position: relative;
				display: flex;
				justify-items: center;
				align-items: center;
				width: 320rpx;
				height: 200rpx;
				border-radius: 15rpx;
				border: 2rpx dashed #808080;

				.icon {
					position: absolute;
					width: 30rpx;
					top: 10rpx;
					right: 10rpx;
					z-index: 10;
				}
			}
		}

	}

	.btnSty {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;

		background: #fff;
		padding: 20rpx 20rpx 0 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));

		
	}
</style>